<template>
	<view class="content">
		<u-sticky >
			<u-icon name="search" size="48" class="stickClass" label="筛选" @click="popupSearchPanel"></u-icon>
		</u-sticky>
		
		<view class="goodMessageBox" v-for="item in goodList">
			
			<u-row :gutter="15" custom-style="padding-top:8px">
				<u-col span="12" customStyle="padding-left:8px">
					<view class="reportFont">商品名称：{{item.goodName}}</view>
				</u-col>
			</u-row>
			
			<u-row :gutter="15" custom-style="padding-top:8px">
				<u-col span="7" customStyle="padding-left:8px">
					<view class="reportFont">商品编码：{{item.goodNo}} </view>
				</u-col>
				<u-col span="5">
					<view class="reportFont">品相：{{item.goodConditionText}}</view>
				</u-col>
			</u-row>
			
			<u-row :gutter="15" custom-style="padding-top:8px">
				<u-col span="7" customStyle="padding-left:8px">
					<view class="reportFont">规格：{{item.goodSpecific}} </view>
				</u-col>
				<u-col span="5">
					<view class="reportFont">零售价：{{item.retailPrice}}元</view>
				</u-col>
			</u-row>
			<u-row :gutter="15" custom-style="padding-top:8px">
			</u-row>
		</view>
		
		<u-popup :show="popupMenuShow" mode="right" customStyle="width:300px;" @close="closePopup">
			<u--form
				class="formFontSzie"
				labelPosition="left"
				customStyle="margin-top: 24px;"	
				labelWidth="80px"
				:model="queryParams"
				labelStyle="{'fontSize':'10px'}"
				labelAlign="center"
			>
				<u-form-item label=" 商品">
					<u-input placeholder="商品名称查询" v-model="queryParams.likeGoodName"></u-input>
				</u-form-item>
				<u-form-item label=" 编码">
					<u-input placeholder="商品编码查询" v-model="queryParams.likeGoodNo"></u-input>
				</u-form-item>
			
				
				<u-form-item>
					<u-button type="primary" text="查询" @click="execQuery"></u-button>
				</u-form-item>
				<u-form-item>
					<u-button type="warning" text="重置" @click="resetQuery"></u-button>
				</u-form-item>
				
			</u--form>
		</u-popup>
		
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="loadGoodList"></u-loadmore>
	</view>
</template>

<script>
	import {wxPageListGood} from '@/api/good.js'
	export default{
		data(){
			return {
				popupMenuShow:false,
				loadStatus: 'loadmore',
				pageSize:10,
				queryParams:{
					pageNum:1,
					likeGoodName:undefined,
					likeGoodNo:undefined
				},
				goodList:[]
			}
		},
		///data
		
		onLoad() {
			this.loadGoodList();
		},
		//onLoad
		
		onReachBottom(){
			if(this.loadStatus!=="nomore"){
				this.loadGoodList();
			}
		},
		
		methods:{
			execQuery(){
				this.queryParams.pageNum=1;
				this.goodList=[];
				this.loadGoodList();
				this.popupMenuShow=false;
			},
			resetQuery(){
				this.queryParams={
					likeGoodName:undefined,
					likeGoodNo:undefined
				};
			},
			loadGoodList(){
				let that=this;
				this.loadStatus="loading";
				wxPageListGood(this.queryParams).then(res=>{
					that.toPushDataToList(res);
				});
				
			},
			toPushDataToList(res){
				if(res.rows && res.rows.length>0){
					for(let i=0;i<res.rows.length;i++){
						this.goodList.push(res.rows[i]);
					}
					let dbTotal=res.total;
					let currentTotal=this.queryParams.pageNum*this.pageSize;
					if(currentTotal>=dbTotal){
						this.loadStatus="nomore";
					}else{
						this.queryParams.pageNum++;
						this.loadStatus="loadmore";
					}
				}else{
					this.loadStatus="nomore";
				}
			},
			popupSearchPanel(){
				this.popupMenuShow=true;
			},
			closePopup(){
				this.popupMenuShow=false;
			}
		},
		//methods
	}
</script>

<style scoped>
	.goodMessageBox{
		border-radius: 3% 3% 3% 3%;
	
		background-color: rgb(97,197,164);
		height: auto;
		margin-top: 8px;
		margin-left: 8px;
		margin-right: 8px;
	}
	.reportFont{
		font-size: 13px;
		color: rgb(252, 252, 250);
	}
</style>